<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title></title>
	<style>
		.preview img,.preview video{width:100%}
	</style>
    <script type="text/javascript">
    	
   		
   		
    </script>
</head>
<body>
	<h1>DCloud H5+Runtime接口测试</h1>
	<ul>
		<li class="cameraPage">
			摄像头功能
		</li>
		<li>
			<button id="btnSM">扫码1</button>
			<button id="btnSB">识别图条码</button>
		</li>
	</ul>
	<script>
		document.addEventListener('plusready', function(){
			//console.log("所有plus api都应该在此事件发生后调用，否则会出现plus is undefined。")
			const cameraPage = document.querySelector('.cameraPage')
			
			const btnSM = document.querySelector('#btnSM')
			const btnSB = document.querySelector('#btnSB')
			
			// 利用webview实现页面跳转
			cameraPage.onclick = function(){
				// 创建webview
				// const wv = plus.webview.create('views/camera.html','pageCamera')
				
				// plus.webview.show(wv,'slide-in-left')
				
				plus.webview.open('views/camera.html','pageCamera',{},'slide-in-left')
			}
			
			// 扫码
			btnSM.onclick = function(){
				const {QR,EAN13,EAN8} = plus.barcode
				const barcode = plus.barcode.create('sm',[QR,EAN13,EAN8], {
			top:'0px',
			left:'0px',
			width: '100%',
			height: '100%',
			position: 'absolute'
		})
				// 扫码空间是一个webview对象，需要添加到当前webview才能看到扫码效果
				plus.webview.currentWebview().append(barcode);
				
				barcode.onmarked = function(type,code,file){
					console.log('onmarked',type,code,file)
					barcode.close();
				}
				barcode.start()
			}
			
			// 识别条码
			btnSB.onclick = function(){
				plus.gallery.pick((picPath)=>{
					
					plus.barcode.scan(picPath,(type,code)=>{
						console.log('scan',type,code)
					})
				})
			}
		});
		
	</script>
</body>
</html>
